<template>
    <div class="feedback">
       <div class="feedback-control clearfix">
           <div class="search-small fl">
                <label for="search-small" class="label-search">问题搜索：</label>
                <input type="text" id="search-small"/>
            </div>
            <div class="update fl">
                <span class="update-text">更新日期：</span>
                <el-date-picker
                    v-model="date"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    class="date"
                    :default-time="['12:00:00']">
                </el-date-picker>
            </div>
           <div class="state fl">
                <span class="common-text">状态:</span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
           </div>
          <div class="btn-wrap fl">
              <button class="btn">搜素</button>
              <button class="btn">清除</button>
          </div>
       </div>
       <ul class="feedBack-list">
           <li class="feedBack-item" @click='openHandleFeedBack'>
               <p class="feedBack-asking">
                   <span class="index">1</span>
                   <span class="title">赛云的时间如何设定?</span>
                   <span class="state">已拒绝</span>
                   <span class="date">2018-06-04</span>
                   <span class="person">李四</span>
                </p>
                <p class="feedBack-content">答案信息有误，时间应应该是</p>

           </li>
           <li class="feedBack-item">
               <p class="feedBack-asking">
                   <span class="index">1</span>
                   <span class="title">赛云的时间如何设定?</span>
                   <span class="state">已拒绝</span>
                   <span class="date">2018-06-04</span>
                   <span class="person">李四</span>
                </p>
                <p class="feedBack-content">答案信息有误，时间应应该是</p>

           </li>
           <li class="feedBack-item">
               <p class="feedBack-asking">
                   <span class="index">1</span>
                   <span class="title">赛云的时间如何设定?</span>
                   <span class="state">已拒绝</span>
                   <span class="date">2018-06-04</span>
                   <span class="person">李四</span>
                </p>
                <p class="feedBack-content">答案信息有误，时间应应该是</p>

           </li>
           <li class="feedBack-item">
               <p class="feedBack-asking">
                   <span class="index">1</span>
                   <span class="title">赛云的时间如何设定?</span>
                   <span class="state">已拒绝</span>
                   <span class="date">2018-06-04</span>
                   <span class="person">李四</span>
                </p>
                <p class="feedBack-content">答案信息有误，时间应应该是</p>

           </li>
           <li class="feedBack-item">
               <p class="feedBack-asking">
                   <span class="index">1</span>
                   <span class="title">赛云的时间如何设定?</span>
                   <span class="state">已拒绝</span>
                   <span class="date">2018-06-04</span>
                   <span class="person">李四</span>
                </p>
                <p class="feedBack-content">答案信息有误，时间应应该是</p>

           </li>
           <li class="feedBack-item">
               <p class="feedBack-asking">
                   <span class="index">1</span>
                   <span class="title">赛云的时间如何设定?</span>
                   <span class="state">已拒绝</span>
                   <span class="date">2018-06-04</span>
                   <span class="person">李四</span>
                </p>
                <p class="feedBack-content">答案信息有误，时间应应该是</p>

           </li>
           
       </ul>
    </div> 

</template>
<script>
export default {
    data(){
        return{
             options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }],
            }
    },
    methods:{
        openHandleFeedBack(){
            this.$router.push('/backdoor/handleBack');

        }
    }
    
}
</script>
<style lang='scss' scoped>
.feedback{
    .feedback-control{
        @at-root #search-small{
            width: 200px;
            height: 22px;
            border: 1px solid #a0a0a0;
            border-radius: 3px;
        }
        .search-small{
            margin-right: 20px;
            .label-search{
                font-size: 14px;
                color:#000;
            }

        }
        .update{

            .update-text{
                vertical-align: middle;
                
                
                font-size: 14px;
                font-weight: bold;
            }
            .date{
                width: 216px;      
                height: 24px;         
                vertical-align: middle;
                line-height: 24px;
                .el-input__inner{
                    border: 1px solid #a0a0a0;

                }
                .el-icon-date:before{ //小闹钟
                   content: "";
                   display: none;

                }
                .el-range-separator{  //中间那个'-'
                    line-height: 14px;
                }
                .el-date-editor .el-range__close-icon{  //删除符号
                    line-height: 14px;

                }

            }
        }
        .state{
            width: 160px;
        }
        .btn{  //公共样式
        padding: 4px 10px;
        font-size: 16px;
        color:#fff;
        background-color:#84c224;
        border-radius: 3px;
        cursor: pointer;
        }
        .common-text{
            
            display: inline-block;
        }
    }

    .feedBack-item{
        width: 100%;
        border-bottom: 1px solid #6f6f6f;
        height: 76px;
        cursor: pointer;
        .feedBack-asking{
            font-size: 16px;
            // line-height: 47px;
            padding-top: 24px;
            padding-bottom: 14px;
            span{
                display: inline-block;
                text-align: left;
            }
            .index{
                width: 36px;
            }
            .title{
               width: 500px;
               color: #000;
            }
            .state{
                width:92px ;
                color: #76adad;

            }
            .date{
                width: 164px;
            }
            

        }
        .feedBack-content{
            font-size: 14px;
            margin-left: 48px;
            padding-bottom: 8px;
            color:#a2abab;
        }

    }

}
</style>


